<template>
  <div class="import-file">
    <el-tabs v-model="tab" stretch>
      <el-tab-pane name="a">
        <div slot="label" class="label">
          <span>A 文件</span>
          <FileLabel :tableData="tableDataA" @close="closeA" />
        </div>
        <TableDisplay
          :table-data="tableDataA"
          :config-data="configDataA"
          @update-table-data="updateDataA"
          @update-config-data="setConfigA"
        />
      </el-tab-pane>
      <el-tab-pane name="b">
        <div slot="label" class="label">
          <span>B 文件</span>
          <FileLabel type="success" :tableData="tableDataB" @close="closeB" />
        </div>
        <TableDisplay
          :table-data="tableDataB"
          :config-data="configDataB"
          @update-table-data="updateDataB"
          @update-config-data="setConfigB"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import TableDisplay from '@/components/TableDisplay'
import FileLabel from '@/components/FileLabel'

export default {
  name: 'ImportFile',
  components: {
    TableDisplay,
    FileLabel,
  },
  data() {
    return {
      tab: 'a',
    }
  },
  computed: {
    ...mapState({
      tableDataA: state => state.tableDataA,
      tableDataB: state => state.tableDataB,
      configDataA: state => state.configDataA,
      configDataB: state => state.configDataB,
    }),
  },
  methods: {
    ...mapMutations({
      setConfigA: 'setConfigA',
      setConfigB: 'setConfigB',
    }),
    ...mapActions({
      updateDataA: 'updateDataA',
      updateDataB: 'updateDataB',
    }),
    closeA() {
      this.updateDataA(null)
      this.tab = 'a'
    },
    closeB() {
      this.updateDataB(null)
      this.tab = 'b'
    },
  },
}
</script>

<style scoped lang="scss">
.label {
  display: flex;

  span {
    margin-right: 0.5em;
  }
}
</style>
